<template>
  <div>
    <el-row>
      <el-dialog v-dialogDrag :visible.sync="visible" :title="title" center :width="width">
        <el-form
          :model="form"
          size="mini"
          :rules="rules"
          ref="ruleForm"
          label-width="80px"
          class="demo-ruleForm"
          :disabled="type === 2"
        >

          <el-form-item label="角色代码">
            <el-input v-model="form.roleCode" ></el-input>
          </el-form-item>
          <el-form-item label="角色名" prop="roleName">
            <el-input v-model="form.roleName" :placeholder="rules.roleName[0].message"></el-input>
          </el-form-item>
          <el-form-item label="角色描述" >
            <el-input v-model="form.roleDescr" placeholder="角色描述"></el-input>
          </el-form-item>
          <el-form-item label="角色状态" prop="status">
            <el-radio-group v-model="form.status">
              <el-radio :label="1">启用</el-radio>
              <el-radio :label="0">禁用</el-radio>
            </el-radio-group>
          </el-form-item>
          <div v-if="type === 2">
            <el-form-item label="创建人" >
              <el-input :value="form.addUser"></el-input>
            </el-form-item>
            <el-form-item label="添加时间" >
              <el-input :value="form.addTime"></el-input>
            </el-form-item>
            <el-form-item label="修改时间">
              <el-input :value="form.updateTime"></el-input>
            </el-form-item>
          </div>
        </el-form>
        <span class="dialog-footer" slot="footer" style="text-align: right!important;">
          <el-button size="mini" @click="visible = false">取 消</el-button>
          <el-button size="mini" @click="resetForm('ruleForm')">重置</el-button>
          <el-button size="mini" @click="save" type="primary">保 存</el-button>
        </span>
      </el-dialog>
    </el-row>
  </div>
</template>

<script>
import { ROLE } from '@/api'

export default {
  components: {
  },
  props: {
    show: { Boolean, default: false },
    value: { Object, default: {} },
    width: { String, default: "50%" },
    title: { String, default: "title" },
    type: {Number,default: 0} // 0 新增 1 编辑 2 查看
  },
  data() {
    return {
      form: { state: 1},
      rules: {
        roleName: [{ required: true, message: "请输入角色名称", trigger: "blur" }]
      }
    };
  },
  computed: {
    visible: {
      get() {
        return this.show;
      },
      set(val) {
        this.$emit("update:show", false);
      }
    }
  },
  mounted() {
    this.setOldData(this.value);
  },
  watch: {
  },
  methods: {
    setOldData(data) {
      this.form = this.$newObject(data);
    },
    save() {
      if(this.$validate(this, 'ruleForm')) {
        if (this.type === 1) {
          ROLE.update(this.form).then(res => {
            if (res.code === 200) {
              this.$message.success(res.message)
            } else {
              this.$message.error(res.message)
            }
            this.visible = false
            this.close()
          })
        } else {
          ROLE.save(this.form).then(res => {
            if (res.code === 200) {
              this.$message.success(res.message)
            } else {
              this.$message.error(res.message)
            }
            this.close()
            this.visible = false
          })
        }

      }
    },
    close() {
      this.$emit('close')
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.setOldData(this.value);
    }
  }
};
</script>
<style lang="scss" scoped>
.small-card {
  ::v-deep .el-card__body {
    padding: 10px;
  }
}

.el-form {
  ::v-deep .el-form-item {
    margin-bottom: 10px;
  }
}
</style>
